<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
</head>

<body>
    <div class="father">
        <div class="son">hah</div>
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="box1">我是div</div>
    <span>我是span</span>
    <ol>
        <li>我是原生的</li>
    </ol>
</body>
<script>
    // ①父节点parentNode
    var son = document.getElementsByClassName('son')
    // var son =document.querySelector('.son')
    console.log(son);
    console.log(son[0].parentNode);
    // ②子节点parentNode.childNode
    // 但是返回的是所有子节点包括元素节点、文本节点等等
    // var ul = document.getElementsByTagName('ul')
    var ul = document.querySelector('ul')
    // childNodes返回值里面包含了所有的子节点，包含了元素节点，文本节点

    // console.log(ul[0].childNodes);
    // parentNode.children返回的是所有子节点，比较常用
    // console.log(ul[0].children);
    // console.log(ul[0].children[0]);
    // console.log(ul[0].children[ul.children.length -1]);
    // 第一个子元素
    console.log(ul.children[0]);
    //    最后一个子元素
    console.log(ul.children[ul.children.length - 1]);

    var box1 = document.querySelector('.box1')
    var span = document.querySelector('span')
    // node.nextSibling
    // 返回当前元素的下一个兄弟节点，包含所有节点
    console.log(box1.nextSibling);
    // node.previousSibling
    // 返回当前元素的上一个兄弟节点，包含所有节点
    console.log(span.previousSibling);
    // node.nextElementSibling
    // 返回当前元素的下一个兄弟元素节点
    console.log(box1.nextElementSibling);
    // （兼容性问题）
    // node.previousElementSibling
    // 返回当前元素的上一个兄弟元素节点
    console.log(span.previousElementSibling);

    var ol = document.querySelector('ol')
    var li =document.createElement('li')
    li.innerHTML='我是生成的第一个'
    ol.appendChild(li)
    var lili = document.createElement('li')
    lili.innerHTML = '我是生成的第二个'
    ol.insertBefore(lili,ol.children[0])
    ol.removeChild(lili)
    // 浅拷贝
    // var lili1 = ol.children[0].cloneNode()
    // 深拷贝
    var lili1 = ol.children[0].cloneNode(true)
    ol.appendChild(lili1)
    

</script>
<!-- 
    网页中所有内容都是节点（标签、属性、文本、注释等）
    利用父子兄节点关系获取元素
    节点至少拥有nodeType(节点类型),nodeName(节点名称),nodeValue(节点值)
    这三个基本属性
    元素节点 nodeType 为 1
    属性节点 nodeType 为 2
    文本节点 nodeType 为 3 （文本节点包含文字，空格，换行等）
    实际开发中，节点操作的主要是元素节点

    parentNode.firstChildren
    返回的是第一个子节点，找不到就返回Null，同样也是包含所有节点
    parentNode.lastChildren
    返回的是最后一个子节点，找不到就返回Null，同样也是包含所有节点
    parentNode.firstElementChild
    返回第一个子元素节点
    （两种方法均只有IE9以上才支持）
    parentNode.lastElementChild
    返回最后一个子元素节点

    创建与添加节点
    创建节点(动态生成节点)
    document.createElement('tagName')
    添加节点
    node.appendChild(child) 添加到末尾
    node.insertBefore(child,指定元素) 添加到前面
    创建了li还要添加进去才会显示。若ul中已有了一个li则添加的li在原有li后面追加
    删除节点
    从DOM中删除节点并返回删除的节点
    复制节点（克隆节点）
    如果括号为空或者里面是false为浅拷贝，只复制标签不复制内容，
    如果想深拷贝就要node.cloneNode(true)，把内容也一起复制过来。

     三种动态创建元素的区别（重点了解）
     document.write() 是直接将内容写入页面的文档流，但是文档流执行完毕后
     则它会导致页面的全部重绘
     element.innerHTML 是将内容写入到某个DOM节点，
    不会导致页面的全部重绘，创建多个元素效率会更高（不要拼接字符串，采取数组的形式拼接）
    结构稍微复杂
     document.createElement() 创建多个元素的效率稍微低一点点
     但是结构更加清晰
     总结：不同的浏览器下，innerHTML效率要比createElement高
 -->

</html>